<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据分析报表</el-breadcrumb-item>
      <el-breadcrumb-item>生产记录报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="sea-box">
        <el-form ref="form" label-width="120px">
          <el-row gutter="20">
            <el-col :span="8">
              <el-form-item label="工单">
                <el-input v-model="searchForm.shoporder"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工单状态">
                <el-select v-model="searchForm.status" placeholder="请选择工单状态">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="SFC">
                <el-input v-model="searchForm.SFC"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="工单创建时间从">
                <el-input v-model="searchForm.start_time"></el-input>
              </el-form-item> </el-col
            ><el-col :span="8">
              <el-form-item label="至">
                <el-input v-model="searchForm.end_time"></el-input>
              </el-form-item> </el-col
            ><el-col :span="8">
              <el-form-item label="物料批次">
                <el-input v-model="searchForm.batch"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="btn">
          <el-button type="success" @click="search">查询</el-button>
          <el-button type="success" @click="empty">清空</el-button>
        </div>
      </div>
      <div v-show="searchTable" class="searchTable">
        <!-- 表格区域 -->
        <el-table
          stripe
          border
          ref="multipleTable"
          :data="ProductionList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            prop="shoporder_no"
            label="产品工单"
            width="240"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sfc"
            label="产品SFC"
            width="240"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sfcStatus"
            label="SFC状态"
            width="80"
            align="center"
          >
          <template #default="scope">
            <span v-if="scope.row.sfcStatus == 0">创建</span>
            <span v-if="scope.row.sfcStatus == 1">生产中 </span>
            <span v-if="scope.row.sfcStatus == 2">已完成</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="shoporder_item"
            label="产品物料编号"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="process_route"
            label="工艺路线"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="shopOrderStatus"
            label="工单状态"
            width="80"
            align="center"
          >
          <template #default="scope">
            <span v-if="scope.row.shopOrderStatus == 0">创建</span>
            <span v-if="scope.row.shopOrderStatus == 1">已下达 </span>
            <span v-if="scope.row.shopOrderStatus == 2">生产中</span>
            <span v-if="scope.row.shopOrderStatus == 3">已完成</span>
            <span v-if="scope.row.shopOrderStatus == 4">关闭</span>
            <span v-if="scope.row.shopOrderStatus == 5">挂起</span>
            <span v-if="scope.row.shopOrderStatus == 6">已删除</span>
          </template>
          </el-table-column>
          <el-table-column prop="site" label="站点" width="80" align="center">
          </el-table-column>
          <el-table-column
            prop="workcenter"
            label="车间"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="workline"
            label="产线"
            width="210"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="by_user"
            label="创建人"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="工单创建时间"
            width="200"
            align="center"
          >
          <template #default="scope">
            {{ formatDate(scope.row.create_time) }}
          </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNow"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="rowCount"
          >
          </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      pageCount: 1,
      pageNow: 1,
      pageSize: 10,
      rowCount: 0,
      searchForm: {
        shoporder: "",
        status: "",
        SFC: "",
        start_time: "",
        end_time: "",
        batch: "",
      },
      searchTable: false,
      ProductionList: [],
      options: [
        {
          value: "0",
          label: "创建",
        },
        {
          value: "1",
          label: "已下达",
        },
        {
          value: "2",
          label: "生产中",
        },
        {
          value: "3",
          label: "已完成",
        },
        {
          value: "4",
          label: "关闭",
        },
        {
          value: "5",
          label: "挂起",
        },
        {
          value: "6",
          label: "已删除",
        },
      ],
    };
  },
  methods: {
    search() {
      this.searchTable = true;
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/report/getProductionRecordListData.shtml",
        data: this.$qs.stringify({
          "pageSize": this.pageSize,
          "pageNow": this.pageNow,
          "shoporder": this.searchForm.shoporder,
          "status": this.searchForm.status,
          "SFC": this.searchForm.SFC,
          "start_time": this.searchForm.start_time,
          "end_time": this.searchForm.end_time,
          "batch": this.searchForm.batch,
        }),
      }).then((res) => {
        console.log(res.data);
        this.ProductionList = res.data.records;
        this.pageCount = res.data.pageCount;
        this.pageNow = res.data.pageNow;
        this.pageSize = res.data.pageSize;
        this.rowCount = res.data.rowCount;
      });
    },
    empty(){
      this.searchForm = {
        shoporder: "",
        status: "",
        SFC: "",
        start_time: "",
        end_time: "",
        batch: "",
      }
      this.searchTable = false
    },
    formatDate(data) {
      var date = new Date(data);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.search();
    },
    handleCurrentChange(newPage) {
      this.pageNow = newPage;
      this.search();
    },
  },
};
</script>

<style lang="less" scoped>
.sea-box {
  width: 80%;
  height: 150px;
  margin: 0 auto;
  position: relative;
  .btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.searchTable{
    margin-top: 30px;
}
</style>